<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>剪映小助手</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <link rel="stylesheet" href="./assets/styles.css" />
  </head>

  <body>
    <div class="container">
      <!-- 模块一：走马灯 -->
      <section class="module">
        <div class="carousel">
          <div class="carousel-inner">
            <div
              class="carousel-item"
              style="
                background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb');
              "
            >
              <div class="carousel-caption">
                <h3>美丽山脉</h3>
                <p>自然风光的壮丽与宁静</p>
              </div>
            </div>
            <div
              class="carousel-item"
              style="
                background-image: url('https://images.unsplash.com/photo-1518837695005-2083093ee35b');
              "
            >
              <div class="carousel-caption">
                <h3>宁静海滩</h3>
                <p>夏日海滩的悠闲时光</p>
              </div>
            </div>
            <div
              class="carousel-item"
              style="
                background-image: url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e');
              "
            >
              <div class="carousel-caption">
                <h3>神秘森林</h3>
                <p>探索未知的自然奥秘</p>
              </div>
            </div>
          </div>
          <button class="carousel-control carousel-prev">
            <i class="fas fa-chevron-left"></i>
          </button>
          <button class="carousel-control carousel-next">
            <i class="fas fa-chevron-right"></i>
          </button>
          <div class="carousel-indicators">
            <div class="carousel-indicator active"></div>
            <div class="carousel-indicator"></div>
            <div class="carousel-indicator"></div>
          </div>
        </div>
      </section>

      <!-- 模块二：输入框 -->
      <section class="module">
        <div class="textarea-container">
          <textarea
            class="auto-resize-textarea"
            placeholder="请输入内容..."
          ></textarea>
        </div>
      </section>

      <!-- 模块三：案例Tab -->
      <section class="module tabs-module">
        <span><i class="fas fa-folder-open"></i> 案例草稿：</span>
        <div class="tabs" id="tabContainer"></div>
      </section>

      <!-- 模块四：下载开关 -->
      <section class="module">
        <div class="switch-container">
          <label class="switch">
            <input type="checkbox" id="downloadToggle" checked />
            <span class="slider"></span>
          </label>
          <span>下载后打开草稿路径文件</span>
        </div>
      </section>

      <!-- 模块五：下载按钮 -->
      <section class="module">
        <button id="downloadBtn" class="btn btn-download">
          <i class="fas fa-download"></i> 创建剪映草稿
        </button>
      </section>

      <!-- 模块六：下载日志 -->
      <section class="module log-module">
        <h2 class="module-title">
          <span><i class="fas fa-list-alt"></i> 下载日志</span>
          <button id="clearLogBtn" class="btn btn-clear">
            <i class="fas fa-trash"></i> 清空日志
          </button>
        </h2>
        <div class="log-empty" id="emptyLog">暂无日志记录</div>
        <ul class="log-list hide" id="downloadLog"></ul>
      </section>
    </div>

    <script src="./assets/BaseScripts.js"></script>
    <script src="./assets/Download.js"></script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        initCarousel();
        initTextarea();
        initDownload();
      });
    </script>
  </body>
</html>
